<template>
    <div class="apply settle-sub-box">
        <div class="fill-in">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <div class="title">基本信息</div>
                <div class="indent">
                    <el-form-item label="姓名" prop="name">
                        <el-input placeholder="请输入姓名" v-model="ruleForm.name" @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input placeholder="请输入身份证号" v-model="ruleForm.idCard" @blur="$method.inputBlur()">
                            <el-button slot="append" icon="el-icon-camera-solid"
                                       @click="$router.push($route.path+'/uploadCardId')"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone" class="is-required">
                        <el-input placeholder="请输入手机号码" v-model="ruleForm.phone" type="number"
                                  @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                </div>

                <div class="title bg mt20">住院信息</div>
                <div class="indent">
                    <el-form-item label="住院号" prop="admissionNumber">
                        <el-input placeholder="请输入住院号" v-model="ruleForm.admissionNumber"
                                  @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="床位号" prop="bedName">
                        <el-input placeholder="请选择楼层及床位号" v-model="ruleForm.bedName" @focus="openFloor"
                                  @blur="$method.inputBlur()" readOnly>
                            <template slot="append"><i class="el-icon-arrow-right"></i></template>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="indent">
            <el-button type="primary" class="submit" @click="submitForm('ruleForm')">提交</el-button>
        </div>
        <form name="imgForm" style="display:none;"></form>
        <router-view @updateInfo="updateInfo"></router-view>
        <div v-transfer-dom>
            <popup v-model="show" :hide-on-blur="false" :height="'65%'">
                <popup-header
                    :left-text="'取消'"
                    :right-text="'确定'"
                    @on-click-left="popupCancel"
                    @on-click-right="popupSure"></popup-header>
                <div class="floor-tree">
                    <div class="floor">
                        <div v-for="(floor,index) in floorTree" :key="index" :class="{active: floor.checked}"
                             @click="floorChange(floor)">
                            {{floor.name}}
                        </div>
                    </div>
                    <div class="area">
                        <div v-for="(area,index) in floorTreeArea" :key="index" :class="{active: area.checked}"
                             @click="areaChange(area)">
                            {{area.name}}
                        </div>
                    </div>
                    <div class="sickbed">
                        <div v-for="(item,index) in floorTreeBed" :key="index"
                             :class="{active: item.checked, disabled: item.state}"
                             @click="bedChange(item)">
                            <div class="label">{{item.name}}</div>
                            <i class="el-icon-check check"></i>
                        </div>
                    </div>
                </div>
            </popup>
        </div>
    </div>
</template>

<script>
    import {PopupHeader, Popup, TransferDom} from 'vux'
    import Vue from 'vue'

    export default {
        data() {
            let validatePhone = (rule, value, callback) => {
                if (!/^1\d{10}$/.test(value)) {
                    callback(new Error('手机号格式错误'))
                } else {
                    callback()
                }
            }
            return {
                ruleForm: {
                    name: '',
                    cardType: '1',
                    idCard: '',
                    phone: '',
                    sickbedId: '',
                    bedName: '',
                    admissionNumber: '',
                    floorId: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请填写手机号', trigger: 'blur'},
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    idCard: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ],
                    bedName: [
                        {required: true, message: '请选择床位号', trigger: 'change'}
                    ],
                    admissionNumber: [
                        {required: true, message: '请填写住院号', trigger: 'blur'}
                    ]
                },
                role: '', // 身份类型
                idCardMessage: {}, // 身份证信息
                show: false,
                floorTree: [],
                floorTreeArea: [],
                floorTreeBed: []
            }
        },
        updated() {
            if (this.idCardMessage.idnumber) this.ruleForm.idCard = this.idCardMessage.idnumber
            if (this.idCardMessage.name) this.ruleForm.name = this.idCardMessage.name
        },
        mounted() {
            this.$emit('footerHide')
            this.getUserInfo()
        },
        methods: {
            getUserInfo() {
                this.$http.get('/getMyBaseDate').then(result => {
                    if (result.success) {
                        this.ruleForm = {...result.data}
                    }
                })
            },
            updateInfo(name, info) {
                this[name] = info
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$method.showToast(obj[Object.keys(obj)[0]][0].message)
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.submit()
                })
            },
            submit() {
                let _this = this,
                    params = {
                        idCard: this.ruleForm.idCard, // 证件号
                        name: this.ruleForm.name, // 姓名
                        phone: this.ruleForm.phone, // 手机号
                        sickbedId: this.ruleForm.sickbedId,
                        floorId: this.ruleForm.floorId,
                        admissionNumber: this.ruleForm.admissionNumber
                    }
                this.$http.post('/patientRegister', params).then(result => {
                    if (result.success) {
                        this.$router.replace('/patient')
                        _this.$refs.ruleForm.resetFields()
                    }
                })
            },
            openFloor() {
                let _this = this
                this.$http.get('/getTree').then(result => {
                    if (result.success) {
                        this.floorTree = result.data
                        this.floorTreeArea = []
                        this.floorTreeBed = []
                        setValue()
                        this.show = true
                    }
                })

                // 打开探视时间弹窗后设置默认选中项
                function setValue() {
                    if (_this.floorTree[0]) {
                        _this.floorChange(_this.floorTree[0], () => {
                            if (_this.floorTreeArea[0]) {
                                _this.areaChange(_this.floorTreeArea[0])
                            }
                        })
                    }
                }
            },
            floorChange(floor, callback) {
                this.floorTree.map(e => {
                    e.checked = false
                })
                this.floorTreeArea = []
                this.floorTreeBed = []
                floor.checked = true
                this.floorTreeArea = this.$method.deepClone(floor.children)
                if (callback) callback()
            },
            areaChange(area) {
                this.floorTreeArea.map(e => {
                    e.checked = false
                })
                this.floorTreeBed = []
                area.checked = true
                this.floorTreeBed = this.$method.deepClone(area.children)
            },
            bedChange(item) {
                if (item.state) return
                this.floorTreeBed.map(e => {
                    Vue.set(e, 'checked', false)
                })
                Vue.set(item, 'checked', true)
            },
            // 弹窗关闭
            popupCancel() {
                this.show = false
            },
            // 探视时间弹窗点击确定按钮事件
            popupSure() {
                let floor = '', area = '', bed = '', _this = this
                this.floorTree.map(e => {
                    if (e.checked) {
                        floor = e.name
                        _this.ruleForm.floorId = e.id
                    }
                })
                this.floorTreeArea.map(e => {
                    if (e.checked) area = e.name
                })
                this.floorTreeBed.map(e => {
                    if (e.checked) {
                        bed = e.name
                        this.ruleForm.sickbedId = e.id
                    }
                })
                if (floor && area && bed) this.ruleForm.bedName = floor + ' ' + area + ' ' + bed
                this.popupCancel()
            }
        },
        components: {
            PopupHeader,
            Popup
        },
        directives: {
            TransferDom
        }
    }
</script>

<style scoped lang="less">
    .apply {
        background-color: #fff;

        .title {
            line-height: .6rem;
            padding: .2rem .3rem;
            color: #333;
            font-weight: bolder;

            &.bg {
                background-color: #f2f2f2;
            }

            &:first-child {
                padding-bottom: 0;
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            /*border-bottom: 1px solid #EBEBEB;*/
            background-color: #fff;
            margin-bottom: .15rem;
            /*padding: .1rem 0;*/

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
            }

            .el-form-item__content {
                position: relative;
                font-size: .28rem;
                line-height: .5rem;
                margin-top: .1rem;
                border: 1px solid #EBEBEB;
                border-radius: .05rem;
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }

                .el-input-group__append {
                    border: 0 none;
                    background-color: transparent;
                    padding: 0 .2rem;

                    .el-button {
                        i {
                            font-size: .48rem;
                        }
                    }
                }
            }

            .el-button {
                font-size: .28rem;
            }

            &.custom-label {
                padding: .1rem .2rem;

                .el-form-item__label {
                    padding-left: 0;
                    width: 100%;

                    .is-required {
                        &:before {
                            content: '*';
                            color: #F56C6C;
                            margin-right: 4px;
                        }
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .indent {
        padding: .2rem .3rem;
    }

    .submit {
        display: block;
        width: 100%;
        margin-top: .5rem;
        height: .88rem;
        border-radius: .5rem;
        background-color: #598CDA;
        border-color: #598CDA;
        margin-bottom: .3rem;
    }

    .floor-tree {
        height: calc(100% - .8rem);
        display: flex;

        .floor, .area, .sickbed {
            background-color: #fff;

            > div {
                padding: .15rem .2rem;
            }
        }

        .floor, .area {
            width: 2rem;
            text-align: center;
            border-right: 2px solid #eee;

            .active {
                /*background-color: #f5f5f5;*/
                background-color: rgba(89, 140, 218, .8);
                color: #fff;
            }
        }

        .sickbed {
            flex: 1;

            overflow-y: auto;

            > div {
                border-bottom: 1px solid #eee;
                display: flex;
                align-items: center;

                .check {
                    display: none;
                    color: #598CDA;
                }

                .label {
                    flex: 1;
                }

                &.active {
                    .check {
                        display: block;
                    }
                }

                &.disabled {
                    background-color: #f5f5f5;
                    color: #999;
                }
            }
        }
    }
</style>
